<template>
    <div id="goods-search">
        <van-search
                v-model="search.name"
                placeholder="搜索商品名称"
                show-action
                @search="onSearch"
                @cancel="$router.back(-1)"
        />
        <van-tabs v-model="active" @click="onClick">
            <van-tab title="综合"/>
            <van-tab title="销量"/>
            <van-tab title="价格"/>
            <van-tab title="筛选"/>
        </van-tabs>
        <search-list :goodsArray="goodsArray"></search-list>

        <van-popup v-model="show" position="right">
        </van-popup>
        <div style="height: 50px; width: 100%; z-index: 99;background: #fff; position: fixed; bottom: 0"></div>
    </div>
</template>

<script>
  // TODO 筛选条件还需要优化
  import listGoods from '../../api/search'
  import SearchList from './search-list.vue'

  export default {
    name: 'goods-search',
    components: {
      'search-list': SearchList
    },
    data() {
      return {
        search: {
          name: '',
        },
        goodsArray: [],
        active: '',
        show: false
      }
    },
    mounted() {
      Object.assign(this.search, this.$route.query)
      this.loadGoods()
    },
    methods: {
      loadGoods(params = {}) {
        listGoods(Object.assign(params, this.search), d => {
          this.goodsArray = d;
        })
      },
      onSearch() {
        this.loadGoods()
      },
      onClick(active) {
        let zh = 0;
        let xl = 1;
        let jg = 2;
        let sx = 3;
        if (active === zh) {
          this.loadGoods()
        } else if (active === xl) {
          this.loadGoods()
        } else if (active === jg) {
          this.loadGoods({order: 'price'})
        } else if (active === sx) {
          this.show = true
        }
      }
    }
  }
</script>

<style lang="less">

    .van-popup {
        padding: 20px;
        box-sizing: border-box;
        &--bottom {
            width: 100%;
            padding: 0;
            border-radius: 0;
        }
        .van-tabs__content {
            height: 156px;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
        .van-tab__pane:not(:first-child) {
            padding: 10px;
            line-height: 1.4;
            color: #666;
        }
        &--top {
            color: #fff;
            width: 100%;
            border-radius: 0;
            line-height: 20px;
            background-color: rgba(0, 0, 0, 0.8);
        }
        &--left,
        &--right {
            width: 80%;
            height: 100%;
        }
    }
</style>